<template>
    <view class="float-ball" :style="ballStyle" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
        @click="handleClick">
        <image class="ball-image" :src="imgSrc" mode="aspectFill"></image>
    </view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';

const props = defineProps({
    // 悬浮球图片
    imgSrc: {
        type: String,
        default: '/static/img/float-ball.png'
    },
    // 悬浮球大小
    size: {
        type: Number,
        default: 50
    },
    // 初始位置
    initialPosition: {
        type: Object,
        default: () => ({
            x: 'right',
            y: 'bottom',
            offsetX: 3,
            offsetY: 100
        })
    }
});

// 悬浮球位置
const position = ref({
    x: 0,
    y: 0
});

// 窗口尺寸
const windowInfo = ref({
    width: 0,
    height: 0
});

// 手指触摸点初始位置
const startPoint = ref({
    x: 0,
    y: 0
});

// 是否正在移动
const isMoving = ref(false);

// 悬浮球样式
const ballStyle = computed(() => {
    return {
        width: `${props.size}px`,
        height: `${props.size}px`,
        left: `${position.value.x}px`,
        top: `${position.value.y}px`,
        opacity: isMoving.value ? 0.8 : 1
    };
});

// 初始化
onMounted(() => {
    // 获取窗口尺寸
    const info = uni.getSystemInfoSync();
    windowInfo.value = {
        width: info.windowWidth,
        height: info.windowHeight
    };

    // 设置初始位置
    initPosition();
});

// 初始化位置
function initPosition() {
    const { x, y, offsetX, offsetY } = props.initialPosition;

    if (x === 'right') {
        position.value.x = windowInfo.value.width - props.size - Math.max(offsetX, 3);
    } else if (x === 'left') {
        position.value.x = Math.max(offsetX, 3);
    } else {
        position.value.x = x;
    }

    if (y === 'bottom') {
        position.value.y = windowInfo.value.height - props.size - offsetY;
    } else if (y === 'top') {
        position.value.y = offsetY;
    } else {
        position.value.y = y;
    }
}

// 触摸开始
function touchStart(e) {
    const touch = e.touches[0];
    startPoint.value = {
        x: touch.clientX - position.value.x,
        y: touch.clientY - position.value.y
    };
    isMoving.value = true;
}

// 触摸移动
function touchMove(e) {
    const touch = e.touches[0];

    // 计算新位置
    let newX = touch.clientX - startPoint.value.x;
    let newY = touch.clientY - startPoint.value.y;

    // 限制边界
    newX = Math.max(0, Math.min(newX, windowInfo.value.width - props.size));
    newY = Math.max(0, Math.min(newY, windowInfo.value.height - props.size));

    // 更新位置
    position.value = {
        x: newX,
        y: newY
    };
}

// 触摸结束，自动吸附
function touchEnd() {
    isMoving.value = false;

    // 自动吸附到左侧或右侧，与屏幕保持3px间距
    const middleX = windowInfo.value.width / 2;

    if (position.value.x < middleX) {
        // 吸附到左侧，保持3px间距
        position.value.x = 3;
    } else {
        // 吸附到右侧，保持3px间距
        position.value.x = windowInfo.value.width - props.size - 3;
    }
}

// 点击事件
function handleClick() {
    // 跳转到avatar页面
    uni.navigateTo({
        url: '/pages/avatar/avatar'
    });
}
</script>

<style lang="scss" scoped>
.float-ball {
    position: fixed;
    z-index: 999;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    overflow: hidden;

    &:active {
        transform: scale(0.95);
    }

    .ball-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}
</style>